<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@page import="com.cap.bts.framework.usermgnt.constant.EmployeeStatus"%>    
    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>销售额图表</title>
<%@include file="../include/include.jsp"%>
<link rel="stylesheet" type="text/css" href="${csspath }/public.css"/>
<link rel="stylesheet" type="text/css" href="${csspath }/datepicker.css"/>
<link rel="stylesheet" type="text/css" href="${csspath }/style_l.css"/>
<script type="text/javascript" src="${jspath }/jquery-1.4.4.js"></script>
<script type="text/javascript" src="${jspath }/jquery.ui.min.js"></script>
<script type="text/javascript" src="${jspath }/ui.datepicker_zh-CN.js"></script>
<script type="text/javascript" src="${jspath }/jquery.blockUI.js"></script>
<script type="text/javascript" src="${jspath }/public.js"></script>
<script type="text/javascript" src="${jspath }/jquery.selectAll.js"></script>
<script type="text/javascript" src="${jspath}/jquery/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="${jspath}/jquery/jquery.alerts.js"></script>
<script type="text/javascript" src="${jspath}/load_layer.js"></script>
<script type="text/javascript" src="${jspath}/yui-min.js"></script>
<link rel="stylesheet" type="text/css" href="${csspath}/jquery.alerts.css" />

<link rel="stylesheet" type="text/css"
	href="${webcontext}/css/validationEngine.jquery.css" />
<script src="${jspath}/jquery/validate/jquery.validationEngine.js"
	type="text/javascript"></script>
<script src="${jspath}/jquery/validate/jquery.validationEngine-zh.js"
	type="text/javascript"></script>
	<script type="text/javascript"
	src="${webcontext}/javascript/jquery/jquery.ui.draggable.js"></script>
	<link rel="stylesheet" type="text/css"
	href="${bootstrapPath}/css/bootstrap.css" />
<script type="text/javascript" src="${bootstrapPath}/js/bootstrap.js"></script>
<style type="text/css">
html, body {
	overflow: auto;
}
#mychart { 
    margin:10px 10px 10px 10px; 
    width:90%;
    max-width: 800px;
    height:400px;
}
</style>

<script type="text/javascript">
 $(function(){ 
	var myDataValues;
	var myMaxDataValues;
 	$.ajax({
		type:'POST',
		url: '${webcontext}/crmdp/dealer/report/loadChartInventoryMax',
		async: false,
		data : $('#startDate').serialize(),
		success : function(data) {
			if(data){
				myMaxDataValues=eval(data);
			}else{
				alert("wrong");
			}
		}
	}) ; 
	$.ajax({
		type:'POST',
		url: '${webcontext}/crmdp/dealer/report/loadChartMemberPage',
		async: false,
		data : $('#startDate').serialize(),
		success : function(data) {
			if(data){
				myDataValues=data;	
				YUI().use('charts-legend', function (Y){
				     //Define our axes for the chart.
				    var myAxes = {
				        newQty:{
				            keys:["newMember","newPackage","newCar"],
				            position:"left",
				            maximum:myMaxDataValues,
				            minimum:0,
				            type:"numeric"
				        },
				        dateRange:{
				            keys:["month"],
				            position:"bottom",
				            type:"category",
				            styles:{
				                majorTicks:{
				                    display: "none"
				                },
				                label: {
				                    rotation:-30,
				                    margin:{top:5}
				                }
				            }
				        }
				    };
				    //Define a series collection so that we can assign nice display names
				     var mySeries = [
				        {type:"combo", yKey:"newMember", yDisplayName:"新增会员", xDisplayName:"月份"},
				        {type:"combo", yKey:"newPackage", yDisplayName:"新增套餐", xDisplayName:"月份"},
				        {type:"combo", yKey:"newCar", yDisplayName:"新增车牌", xDisplayName:"月份"}];

					var mychart = new Y.Chart({
                        legend: {
                            position: "right",
                            width: 300,
                            height: 300,
                            styles: {
                                hAlign: "center",
                                hSpacing: 4
                            }
                        },
                        axes: myAxes,
						dataProvider: myDataValues,
                        seriesCollection:mySeries,
					    render: "#mychart",
                        interactionType:"planar",
                        horizontalGridlines:true,
                        verticalGridlines:true
					    });
					});
			}else{
				alert("wrong");
			}
		}
	}) 
	
}); 
function backToSearch(){
	window.location.href ="${webcontext}/crmdp/dealer/report/backToSalesReportPage";
}
</script> 
</head>
<body>
	<!-- content -->
		<button type="button" class="btn btn-success" value="   返  回   " onclick="backToSearch()">
	    	<i class="glyphicon glyphicon-share-alt" style="color:#FFFFFF"></i>&nbsp;返回
	    </button>
	    <input type="hidden" id="transactionStartDate" name="transactionStartDate" value="${transactionStartDate}"/>
	    <input type="hidden" id="transactionEndDate" name="transactionEndDate" value="${transactionEndDate}"/>
		<div id="mychart"></div>
	<!-- content -->
	
  </body>
</html>